從wework網站看到 mapbox的串接，畫面簡單乾淨可客製化。
數字是區域的店家數，將map放大可顯示店家位置
需先建立帳號 取得 API access token
有6種呈現方式
想要呈現多個地點，所以選取 Data-driven visualizations
左側有 Tutorials 分頁選取 Add points to a web map, part 3: add interactivity 較符合想呈現的樣式。
分3個階段
Part 1: Prepare your data
Part 2: Create a map style
Part 3: Add interactivity
Part 1: Prepare your data
Mapbox Studio 右側欄選取 Datasets
Mapbox Studio
Datasets 頁面 選取 New Dataset 按鈕
Upload 按鈕 放入GeoJSON, JSON 或 CSV 檔案 (官網有提供範本) 選Confirm，選Create。
Start editing
一開始會看到整個地球地圖，右側工具欄可能會遮住清單的地點。
選取 search dataset會zoom in 地點。左欄可以增減property，和GeoJSON檔的結構。
沒更改就可 Export to tileset
會生成一個網址: mijouhsieh.cljgwg0me0gs82bpn8udrhv1x-7uvd6
點選 藍字 caneles-taipei 最終結果?
Part 2: Create a map style
Styles 頁面
選取 New Style
視窗可選6種樣式或上傳照片選顏色
Untitle改專案名稱 / 選Layer / 左上+ / [Select data]下方source 找到剛建立的tileset
[Select data] 下方 Type 可更改地點呈現方式-預設 circle => [Style] 可更換地點的圓點顏色。
[Select data] 下方 Type 選 Symbol(有使用icon或text標示)。
[Style] 下方 [Icon] 新增圖片svg檔。
[Style] 下方 [Placement] 往下拉 Allow icon overlap 改為True。
Publish
Part 3: Add interactivity
複製code到index.html檔
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Points on a map</title>
<meta name='viewport' content='width=device-width, initial-scale=1' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
// The value for 'accessToken' begins with 'pk...'
mapboxgl.accessToken = 'pk.eyJ1IjoibWlqb3Voc2llaCIsImEiOiJjbGpnbG9sZ2gwYThlM3NzMm8yNjc3MnU5In0.TBv6xF7GvwThX7BW_ACfzg';
const map = new mapboxgl.Map({
container: 'map',
// Replace YOUR_STYLE_URL with your style URL.
style: 'YOUR_STYLE_URL',
center: [-87.661557, 41.893748],
zoom: 10.7
});
// Code from the next step will go here.
</script>
</body>
</html>
share 頁面有Share style和Developer resources 依其改code屬性
style: 'YOUR_STYLE_URL',
mapboxgl.accessToken = 'pk.˙˙˙'
center: [-87.661557, 41.893748],
更新styles-publish後，改styles屬性
tocken仍是 建立專案使用的tocken
增加 popups 店家的彈跳視窗
Add an event listener
在 const map 之後 貼上code
map.on('click', (event) => {
// If the user clicked on one of your markers, get its information.
const features = map.queryRenderedFeatures(event.point, {
layers: ['YOUR_LAYER_NAME'] // replace with your layer name
});
if (!features.length) {
return;
}
const feature = features[0];
// Code from the next step will go here.
});
// Code from the next step will go here.
// add
layers: ['YOUR_LAYER_NAME'] => SD Canelés
/*
Create a popup, specify its options
and properties, and add it to the map.
*/
const popup = new mapboxgl.Popup({ offset: [0, -15] })
.setLngLat(feature.geometry.coordinates)
.setHTML(
`<h3>${feature.properties.title}</h3><p>${feature.properties.description}</p>`
)
.addTo(map);
// });
code 包含在事件監聽器的回調函式中，因此只在user單擊地圖時才會執行。
code 使用四種方法來創建Popup、定義其位置和內容，並將其添加到地圖中：
mapboxgl.Popup() 創建一個新的彈出窗口並接受一個選項對象 ，{ offset: [0, -15] } 可以使用它來配置彈出窗口的行為。在此示例中，offset調整彈出窗口錨點的垂直位置，以便彈出窗口不會覆蓋其下方的標記。
Popup.setLngLat() 使用要素的屬性設置彈出窗口錨點的地理位置coordinates。
Popup.setHTML() 將彈出窗口的內容設置為提供的字串。雖然可以提供任何字串，但通常會提供 HTML 作為字串。上面的code將 HTML code與功能title和description屬性組合在一起。
Popup.addTo(map) 將彈出窗口與地圖相關聯，以便當user單擊地圖標記之一時它可以打開。
更改popup的寬度
新增地點
除了 geojson檔新增後，mapbox 的 Tilesets也要重新建立-New tileset
或是進入先前測試3個地點的tilteset， ...選單有replace選項可以換成新的geojson檔。
上傳後得到新的網址mijouhsieh.cljgwg0me0gs82bpn8udrhv1x-7uvd6
再到style頁面，選取之前次試版設定好的樣式，[Select data] 選單更換data，再回 [Style] 需等一下即可見更新。
_@YongChenSu_https://static.coderbridge.com/images/covers/default-post-cover-2.jpg)
